<template>
	<view>
		<swiper :indicator-dots="true"
			:autoplay="true" :interval='2000' :duration="500">
			<block v-for="item in img">
			  <swiper-item style="background-color: #0077AA;">
				<view class="swiper-item">
					<image :src="item.url" mode=""></image>
				</view>
			  </swiper-item>
			</block>
		  </swiper>
		<view class="choose">
			<view @click="router_one">
				<view class="t-icon t-icon-weihujilu" ></view>
				<view>用水抄表</view>
			</view>
			<view @click="router_two">
				<view class="t-icon t-icon-tiaoshijilu"></view>
				<view>设备更换记录</view>
			</view>
			<view @click="router_three">
				<view class="t-icon t-icon-tongjijilu"></view>
				<view>抄表记录查询</view>
			</view>
			<view @click="router_four">
				<view class="t-icon t-icon-daiban"></view>
				<view>我的待办</view>
			</view>
		</view>  
	</view>
</template>

<script>
	import {ref,computed,reactive,toRefs} from 'vue'
	// import {mapState} from 'vuex'
	export default {
		setup(){
			let data=reactive({
				img: [
					{
						url:"https://www.gpbctv.com/uploads/20210503/zip_1620019580zXPNSy.jpg",
					},
					{
						url:"https://img95.699pic.com/photo/50139/7054.jpg_wh860.jpg"
					},
					{
						url:"https://img.sj33.cn/uploads/202008/7-200Q9233239.jpg"
					},
				],
				router_one:()=>{
					uni.navigateTo({
						url:'../usewaterMeter/usewaterMeter',
					})
				},
				router_two:()=>{
					uni.navigateTo({
						url:'../replaceMeter/replaceMeter',
					})
				},
				router_three:()=>{
					uni.navigateTo({
						url:'../Meterreader/recordquery',
					})
				},
				router_four:()=>{
					uni.navigateTo({
						url:'../Meterreader/todolist',
					})
				}
			});
			
	     return  {...toRefs(data)  };	
		},
		onLoad() {
			// console.log(mapState)
		},
		methods: {
	
		}
	}
</script>

<style lang="scss">
	@import url("../../static/chaobiao/iconfont-weapp/iconfont-weapp-icon.css");
swiper{
	height: 400rpx;
	image{
		width: 750rpx;
		height: 400rpx;
	};
}
.choose{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 30rpx;
}
.choose>view{
	width: 250rpx;
	height: 250rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	outline: 1px solid #F2F2F2;
}
.choose>view>view:first-child{
	width: 100rpx;
	height: 100rpx;
	margin-bottom: 20rpx;
}
</style>
